<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="shop-info-box">
					<view class="info-item flexWrapNo">
						<view>活动名称：</view>
						<input placeholder="请输入名称" placeholder-class="placeholderclass" v-model="activity_name"/>
					</view>
					<view class="info-item flexWrap">
						<view class="flexWrapNo" style="flex: 1;">
							<view>有效时间：</view>
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
						<text class="icon-more"></text>
					</view>
					<block v-if="index==1">
						<view class="info-item flexWrap">
							<view class="flexWrapNo" style="flex: 1;">
								<view>开始时间：</view>
								<picker mode="date" :data-index='0' :value="starTime" @change="bindDateChange" :start="date">
									<view class="select-input" v-if="starTime">{{starTime}}</view>
									<view class="select-input" v-else>请选择开始时间</view>
								</picker>
							</view>
							<text class="icon-more"></text>
						</view>
						<view class="info-item flexWrap">
							<view class="flexWrapNo" style="flex: 1;">
								<view>结束时间：</view>
								<picker mode="date" :data-index='1' :value="date" @change="bindDateChange" :start="starTime">
									<view class="select-input" v-if="endTime">{{endTime}}</view>
									<view class="select-input" v-else>请选择结束时间</view>
								</picker>
							</view>
							<text class="icon-more"></text>
						</view>
					</block>
				</view>
				<view class="function-box">
					<view class="function-item flexWrap">
						<view class="th1">充值金额</view>
						<view class="th2">赠送金额</view>
						<view class="th3">操作</view>
					</view>
					<view class="function-item flexWrap" v-for="(item,index) in timeArr" :key='index'>
						<view class="th1">
							<input placeholder="请输入充值金额" placeholder-class="placeholderclass" v-model="item.amount_money" class="input-box" type="digit"/>
						</view>
						<view class="th2">
							<input placeholder="请输入赠送金额" placeholder-class="placeholderclass" v-model="item.give_money" class="input-box" type="digit"/>
						</view>
						<view  class="th3 flexWrap">
							<text @tap="moveDown(index)">下移</text>
							<text @tap="moveUp(index)">上移</text>
							<text @tap="delTime(index)">删除</text>
						</view>
					</view>
					<view class="add-btn" @tap="addItem()">
						新建行
					</view>
				</view>
				<view class="bottom-box flexWrapNo">
					<view class="define-btn" @tap="editActivityRechargePro()">提交保存</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			const starDate = this.getDate('start')
			return {
				pageOpc: 0,
				array: ['永久有效', '自定义有效期'],
				index: 0,
				starTime: starDate,
				endTime: currentDate,
				date: currentDate,
				timeArr: [{
					amount_money: "",
					give_money: "",
				}],
				id:"",
				activity_name:""
			}
		},
		onLoad(ops) {
			this.id=ops.id
			if(this.id){
				this.getrechargeInfo();
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			// 获取时间
			getDate(type) {
				const date = new Date();
				date.setDate(date.getDate());
				// if (type === 'start') {
				// 	date.setDate(date.getDate());
				// }
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			// 选择时间
			bindDateChange(e) {
				let index = e.currentTarget.dataset.index
				if (index == 0) {
					this.starTime = e.target.value
				} else {
					this.endTime = e.target.value
				}
			},
			addItem() {
				let item = {
					amount_money: "",
					give_money: ""
				}
				this.timeArr.push(item)
			},
			delTime(index) {
				// if(this.timeArr.length==1){
				// 	return;
				// }
				this.timeArr.splice(index, 1)
			},
			moveUp(index) {
			  let array=this.timeArr
			  console.log(index)
			  if (index == 0){
				this.$tools.showToast('已在顶部，不能再上移')
				return; 
			  }
			  [array[index - 1], array[index]] = [array[index], array[index - 1]];
			  this.timeArr=JSON.parse(JSON.stringify(array))
			},
			moveDown(index) {
			  let array=this.timeArr
			  if (index === array.length - 1){
				this.$tools.showToast('已在底部，不能再下移')
				return; 
			  }
			  [array[index + 1], array[index]] = [array[index], array[index + 1]];
			  this.timeArr=JSON.parse(JSON.stringify(array))
			},
			getrechargeInfo(){
				this.$request.post(this.$api.getrechargeInfo, {
					store_id: uni.getStorageSync('store_id'),
					id:this.id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						if(data.activity_recharge_info.valid_timedata==2){
							data.activity_recharge_info.startTime=data.activity_recharge_info.custom_time.split(' - ')[0].split(' ')[0]
							data.activity_recharge_info.endTime=data.activity_recharge_info.custom_time.split(' - ')[1].split(' ')[0]
							this.starTime=data.activity_recharge_info.startTime
							this.endTime=data.activity_recharge_info.endTime
						}
						this.activity_name=data.activity_recharge_info.activity_name
						this.timeArr=data.activity_recharge_info.activity_recharge
						this.index=Number(data.activity_recharge_info.valid_timedata)-1
					}
				})
			},
			editActivityRechargePro(){
				let requestUrl=""
				let arrEmpty = false //是否填写完整
				let arrDis = false
				if(!this.activity_name){
					this.$tools.showToast('填写活动名称')
					return;
				}
				if(this.index==1){
					console.log(this.starTime)
					console.log(this.endTime)
					console.log(new Date(this.starTime).getTime())
					console.log(new Date(this.endTime).getTime())
					if(new Date(this.starTime).getTime()>new Date(this.endTime).getTime()){
						this.$tools.showToast('开始时间不能大于结束时间')
						return;
					}
				}
				if (this.timeArr.length >= 1) {
					arrEmpty = this.timeArr.some(item => item.amount_money === "" || item.give_money === "")
				}
				if (this.timeArr.length >= 1) {
					arrDis = this.timeArr.some(item => Number(item.amount_money)===0 || Number(item.give_money)===0)
				}
				if (arrEmpty) {
					this.$tools.showToast('请设置完整后提交')
					return;
				}
				if (arrDis) {
					this.$tools.showToast('金额不能设置0')
					return;
				}
				if(this.id){
					requestUrl=this.$api.editActivityRechargePro
				}else{
					requestUrl=this.$api.addActivityRechargePro
				}
				this.$request.post(requestUrl, {
					store_id: uni.getStorageSync('store_id'),
					id:this.id,
					activity_name:this.activity_name,
					valid_timedata:Number(this.index)+1,
					custom_time:this.index==0?'':this.starTime+' 00:00:00 - '+this.endTime+' 23:59:59',
					activity_recharge:JSON.stringify(this.timeArr)
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('操作成功')
						let pages = getCurrentPages(); //当前页
						let beforePage = pages[pages.length - 2]; //上个页面
						beforePage.$vm.rechargeList()
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 30upx;
		.shop-info-box {
			.info-item {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 30upx 0;
				border-bottom: 1upx solid #36355E;
				&:nth-last-of-type(1){
					border-bottom: none;
				}
				picker{
					flex: 1;
				}
				.select-input{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}
				input {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}

				.icon-more {
					border-color: #FFFFFF;
				}

				.placeholderclass {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
				}
			}
			.remaks-box{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #82819B;
				line-height: 40rpx;
				padding-left: 138upx;
				margin-top: 12upx;
			}
		}
		.function-box{
			background: #1D1C5C;
			border-radius: 10upx;
			padding: 30upx 10upx;
			margin-top: 30upx;
			.function-item{
				font-size: 24upx;
				color: #FFFFFF;
				height: 100upx;
				line-height: 100upx;
				border-bottom: 1rpx solid #36355E;
				border-left: 1rpx solid #36355E;
				border-right: 1rpx solid #36355E;
				&:nth-of-type(1){
					border-top: 1rpx solid #36355E;
					font-weight: bold;
					font-size: 30upx;
					.th3{
						color: #FFFFFF;
					}
				}
				.th1{
					width: 33%;
					height: 100upx;
					text-align: center;
					border-right: 1rpx solid #36355E;
				}
				.th2{
					width: 33%;
					height: 100upx;
					border-right: 1rpx solid #36355E;
					text-align: center;
					flex: 1;
				}
				.th3{
					height: 100upx;
					width: 33%;
					text-align: center;
					color: #26BCFD;
					padding: 0 8upx;
				}
				.input-box {
					height: 100upx;
					width: 98%;
					background:#1D1C5C;
					border-radius: 16upx;
					color: #fff;
					.placeholderClass {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(255, 255, 255, .5);
					}
				}
					
				input {
					height: 100upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #fff;
				}
					
				.placeholderclass {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			.add-btn{
				text-align: center;
				color: #26BCFD;
				height: 100upx;
				line-height: 100upx;
				border-bottom: 1rpx solid #36355E;
				border-left: 1rpx solid #36355E;
				border-right: 1rpx solid #36355E;
			}
		}
		.bottom-box{
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.define-btn{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>
